<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
   <meta charset="utf-8" />
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>Hub · BootMetro</title>

   <meta name="robots" content="noindex, nofollow">
   <meta name="description" content="MetroUI-Web : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
   <meta name="keywords" content="metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
   <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
   
   <!-- remove or comment this line if you want to use the local fonts -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
   <link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="content/css/icomoon.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="content/css/demo.css">
   <link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="content/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="scripts/modernizr-2.6.1.min.js"></script>
   <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
   <style>
      body {
         padding-top: 50px;
         background-color: #333;
      }   
   </style>
</head>

<body data-accent="blue">
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

   <!-- Header
   ================================================== -->
   <header id="nav-bar" class="container-fluid">
      <div class="row-fluid">
         <div class="span8">
            <div id="header-container">
               <a id="backbutton" class="win-backbutton" href="./index.html"></a>
               <h5>BootMetro</h5>
               <div class="dropdown">
                  <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                     Start
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                  <li><a href="./hub.html">Hub</a></li>
                  <li><a href="./tiles-templates.html">Tile Templates</a></li>
                  <li><a href="./listviews.html">ListViews</a></li>
                  <li><a href="./appbar-demo.html">Demo App-Bar</a></li>
                  <li><a href="./table.html">Demo Table</a></li>
                  <li><a href="./icons.html">Icons</a></li>
                  <li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
                  <li><a href="./base-css.html">Bootstrap Base CSS</a></li>
                  <li><a href="./components.html">Bootstrap Components</a></li>
                  <li><a href="./javascript.html">Bootstrap Javascript</a></li>
                  <li class="divider"></li>
                  <li><a href="./index.html">Home</a></li>
               </ul>
            </div>
            </div>
         </div>
         <div id="top-info" class="pull-right">
         <a href="#" class="pull-left">
            <div class="top-info-block">
               <h3>FirstName</h3>
               <h4>LastName</h4>
            </div>
            <div class="top-info-block">
               <b class="icon-user"></b>
            </div>
         </a>
         <hr class="separator pull-left"/>
         <a id="settings" class="pull-left" href="#">
            <b class="icon-settings"></b>
         </a>
      </div>
   </div>
   </header>
   
   <div class="container-fluid">
      <div class="row-fluid">
         <div class="metro span12">
            <div class="metro-sections">
   
               <div id="section1" class="metro-section tile-span-4">
   
                  <h2>MetroUI Demos</h2>
   
                  <a class="tile wide imagetext bg-color-blueDark" href="./tiles-templates.html">
                     <div class="image-wrapper">
                        <img src="content/img/metro-tiles.jpg" />
                     </div>
                     <div class="column-text">
                        <div class="text4">List of all tile templates: square, wide, widepeek, with images or text only.</div>
                     </div>
                     <div class="app-label">Tiles Templates</div>
                  </a>
   
                  <a class="tile wide imagetext wideimage bg-color-orange" href="./appbar-demo.html">
                     <img src="content/img/appbar.png" alt=""/>
                     <div class="textover-wrapper bg-color-blue">
                        <div class="text2">Application Bar</div>
                     </div>
                  </a>
   
                  <a class="tile app wide bg-color-greenDark" href="./table.html">
                     <div class="image-wrapper">
                        <img src="content/img/My Apps.png" alt=""/>
                     </div>
                     <div class="app-label">Styled Table</div>
                  </a>
   
                  <a class="tile app bg-color-purple" href="./listviews.html">
                     <div class="image-wrapper">
                        <span class="icon icon-list-2"></span>
                     </div>
                     <span class="app-label">ListView</span>
                  </a>
   
                  <a class="tile app bg-color-red" href="./charms-demo.html">
                     <div class="image-wrapper">
                        <span class="icon icon-publish"></span>
                     </div>
                     <span class="app-label">[TODO] Charms</span>
                  </a>
   
                  <a class="tile app bg-color-yellow" href="./images.html">
                     <div class="image-wrapper">
                        <span class="icon icon-images"></span>
                     </div>
                     <span class="app-label">[TODO] Images</span>
                  </a>
   
                  <a class="tile app bg-color-blueDark" href="./icons.html">
                     <div class="image-wrapper">
                        <span class="icon icon-IcoMoon" ></span>
                     </div>
                     <span class="app-label">Icons</span>
                  </a>
   
               </div>
   
               <div id="section2" class="metro-section tile-span-4">
   
                  <h2>Bootstrap Metro</h2>
   
                  <a class="tile wide imagetext bg-color-blue" href="./scaffolding.html">
                     <div class="image-wrapper">
                        <img src="content/img/My Apps.png" />
                     </div>
                     <div class="column-text">
                        <div class="text">Grid system</div>
                        <div class="text">Layouts</div>
                        <div class="text">Responsive design</div>
                     </div>
                     <span class="app-label">SCAFFOLDING</span>
                  </a>
   
                  <a class="tile wide imagetext bg-color-blueDark" href="./base-css.html">
                     <div class="image-wrapper">
                        <img src="content/img/Coding app.png" />
                     </div>
                     <div class="column-text">
                        <div class="text">Typography</div>
                        <div class="text">Tables</div>
                        <div class="text">Forms</div>
                        <div class="text">Buttons</div>
                     </div>
                     <span class="app-label">BASE CSS</span>
                  </a>
   
                  <a class="tile app bg-color-orange" href="./components.html">
                     <div class="image-wrapper">
                        <img src="content/img/RegEdit.png" alt="" />
                     </div>
                     <span class="app-label">COMPONENTS</span>
                  </a>
   
                  <a class="tile app bg-color-red" href="./javascript.html">
                     <div class="image-wrapper">
                        <img src="content/img/Devices.png" alt="" />
                     </div>
                     <span class="app-label">JAVASCRIPT</span>
                  </a>
   
               </div>
            </div>
         </div>
      </div>
   </div>
   
   
   <div id="charms" class="win-ui-dark">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-command">
               <span class="win-commandimage win-commandring">&#xe05d;</span>
            </a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-semilight">Semi-Light</option>
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>
   <div class="footer-banner" style="position:fixed;bottom:37px;right:70px;width:728px;"></div>
   <script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
   <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="scripts/jquery.scrollTo.js"></script>
   <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="scripts/bootmetro.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
   <script type="text/javascript" src="scripts/demo.js"></script>
   <script type="text/javascript" src="scripts/holder.js"></script>
   <script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
   <script type="text/javascript">
      $(".metro").metro();
   </script>
</body>
</html>
